<template>
  <div>
    <div class="register_con">
      <div class="l_con fl">
        <a class="reg_logo"><img src="/static/images/logo.png" /></a>
        <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
        <div class="reg_banner"></div>
      </div>

      <div class="r_con fr">
        <div class="reg_title clearfix">
          <h1>用户注册</h1>
          <a href="/login.html">登录</a>
        </div>
        <div class="reg_form clearfix" id="app" v-cloak>
          <form @submit.prevent="register">
            <ul>
              <li>
                <label>用户名:</label>
                <input
                  type="text"
                  v-model="username"
                  name="user_name"
                  @blur="check_username"
                  id="user_name"
                />
                <span v-show="error_name" class="error_tip">用户已存在</span>
              </li>
              <li>
                <label>密码:</label>
                <input
                  type="password"
                  v-model="password1"
                  name="pwd"
                  id="pwd"
                />
                <!-- <span v-show="error_password" class="error_tip"
                  >密码最少8位，最长20位</span
                > -->
              </li>
              <li>
                <label>确认密码:</label>
                <input
                  type="password"
                  v-model="password2"
                  name="cpwd"
                  id="cpwd"
                />
                <!-- <span v-show="error_check_password" class="error_tip"
                  >两次输入的密码不一致</span
                > -->
              </li>
              <li>
                <label>邮箱:</label>
                <input type="text" v-model="email" />
                <!-- <span v-show="error_phone" class="error_tip"
                  >您输入的手机号格式不正确</span
                > -->
              </li>
              <!-- <li>
                <label>短信验证码:</label>
                <input
                  type="text"
                  v-model="sms_code"
                  @blur="check_sms_code"
                  name="msg_code"
                  id="msg_code"
                  class="msg_input"
                />
                <a
                  href="javascript:;"
                  @click="send_sms_code"
                  class="get_msg_code"
                  >{{ sms_code_tip }}</a
                >
                <span v-show="error_sms_code" class="error_tip">{{
                  sms_code_error_tip
                }}</span>
              </li> -->
              <li class="agreement">
                <input
                  type="checkbox"
                  v-model="allow"
                  name="allow"
                  id="allow"
                  checked="checked"
                />
                <label>同意”美多商城用户使用协议“</label>
                <!-- <span v-show="error_allow" class="error_tip2">请勾选同意</span> -->
              </li>
              <li class="reg_sub">
                <input type="submit" value="注 册" name="" />
              </li>
            </ul>
          </form>
        </div>
      </div>
    </div>
    <MyFooter></MyFooter>
  </div>
</template>

<script>
import axios from "axios";
import MyFooter from "./common/Footer";
export default {
  data() {
    return {
      username: "",
      password1: "",
      password2: "",
      allow: "1",
      email: "",
      base_url: "http://127.0.0.1:8000",
      // 错误提示
      error_name: false,
    };
  },
  components: {
    MyFooter: MyFooter,
  },
  methods: {
    // 检查用户名
    check_username() {
      axios({
        url: this.base_url + "/web/check_username/?username=" + this.username,
      }).then((resp) => {
        console.log(resp.data);
        if (resp.data.code == 200) {
          this.error_name = false;
        } else {
          this.error_name = true;
        }
      });
    },
    register() {
      // 1 、 实例化
      let fd = new FormData();
      // 2 、 添加数据
      fd.append("username", this.username);
      fd.append("password1", this.password1);
      fd.append("password2", this.password2);
      fd.append("email", this.email);
      // 3 、 发送数据
      axios({
        url: this.base_url + "/web/register/",
        method: "post",
        data: fd,
      }).then((resp) => {
        console.log(resp.data);
      });
    },
  },
};
</script>

<style>
</style>